<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <!--Extjs version 6.2.0 -->
    <link href="css/theme-classic-all.css" rel="stylesheet" />
    <script type="text/javascript" src="locale/locale-zh_CN.js"></script>
    <script type="text/javascript" src="js/ext-all.js"></script>
    <script type="text/javascript">
        //Anchor布局
        Ext.application({
            name: 'HelloExt',
            launch: function() {
                Ext.create('Ext.Panel', {
                    width: 500,
                    height: 400,
                    title: "Anchor布局",
                    layout: 'anchor',
                    x: 60,
                    y: 80,
                    renderTo: Ext.getBody(),
                    items: [{
                        xtype: 'panel',
                        title: '75% Width and 25% Height',
                        anchor: '75% 25%'
                    }, {
                        xtype: 'panel',
                        title: 'Offset -300 Width & -200 Height',
                        anchor: '-295 -300'
                    }, {
                        xtype: 'panel',
                        title: 'Mixed Offset and Percent',
                        anchor: '-250 10%'
                    }]
                });
            }
        });
    </script>
</head>

<body>

</body>

</html>